<template>
	<view class="car-wrap">
		<view class="car-img">
			<view class="picture-list">
				<!-- 图片 -->
				<view class="picture-list-info">
					<image class="picture-list-img" :src="image" />
					<!-- 图片下方的文字说明 -->
				</view>
			</view>
		</view>
		<view class="color-wrap">
			<u-icon name="arrow-left"></u-icon>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view v-for="(item, index) in colorList" :key="index" class="scroll-view-item_H" @tap="onChangeColor(item)">
					<view class="color-item" :style="{backgroundColor: item.color}"></view>
				</view>
			</scroll-view>
			<u-icon name="arrow-right"></u-icon>
		</view>

		<view @tap="toMore" class="more">
			查看更多案例<u-icon name="arrow-right-double"></u-icon>
		</view>
		<!-- <view class="ly-padding">
			<view class="text-center"><button class="car-btn cu-btn round line-green lg" @tap="selectBrand">点击选择品牌</button></view>		
		</view>
			<view class="selectedText" style="margin-top:50upx;">品牌：{{brand}}</view>
		<view class="ly-padding">
			<view class="text-center"><button class="car-btn cu-btn round line-green lg" @tap="handleShowTree">点击选择车型</button></view>		
		</view>
		<view class="selectedText" style="margin-top:50upx;">车型：{{cartype}}</view>
		<view class="ly-padding">
			<view class="text-center"><button class="car-btn cu-btn round line-green lg" @tap="handleShowColor">点击选择颜色</button></view>		
		</view>
		<view class="selectedText" style="margin-top:50upx;">颜色：{{color}}</view>
		<view class="selectedText" v-for="(item, i) in selectedData">{{item}}</view>
		
		<u-popup v-model="showBrand" mode="right" border-radius="14" width="50%">
			<view style="height: 80upx; text-align:center; padding-top:20upx;">请选择</view>
			<view class="toSelectText" v-for="(item, i) in brandList" @tap="tapItemBrand(item)">{{item}}</view>
		</u-popup>
		<u-popup v-model="showTree" mode="right" border-radius="14" width="50%">
			<view style="height: 80upx; text-align:center; padding-top:20upx;">请选择</view>
			<view class="toSelectText" v-for="(item, i) in selList" @tap="tapItem(item)">{{item}}</view>
		</u-popup>
		<u-popup v-model="showColor" mode="right" border-radius="14" width="50%">
			<view style="height: 80upx; text-align:center; padding-top:20upx;">请选择</view>
			<view class="toSelectText" v-for="(item, i) in selList" @tap="tapItemColor(item)">{{item}}</view>
		</u-popup> -->
		
		<!-- 底部导航 -->
		<u-tabbar v-model="nav_current" :list="nav_list" active-color='#2C2C2C' height="100"></u-tabbar>
	</view>


</template>

<script>
	import {carBrands} from '../../common/carBrands.js';
	import LyTreeDrawer from '../component/ly-tree-drawer.vue'
	export default {
		components: {
			LyTreeDrawer
		},
		data() {
			return {
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/color",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 1,
				brand: '',
				cartype: '',
				color: '',
				image: '',
				tab: 0,//0漆面膜 1内饰 2改色 3窗膜
				showBrand: false,
				showTree: false,
				showColor: false,
				selectedData:[],
				brandList: [],//当前可供选择的品牌
				selList: [],//当前可供选择的元素
				modelList:[
					{
						model:'price',
						modelId:16,
						channel:54,						
					},
					{
						model:'inprice',
						modelId:19,
						channel:55,						
					},
					{
						model:'cprice',
						modelId:20,
						channel:56,	
					},
				],
				colorList: [
					{
						color: '#011b16',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					},
					{
						color: '#870b01',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					},
					{
						color: '#013580',
						imgPath: 'https://www.mopkeji.com/uploads/20210417/c93f03f57a327c8b779051fa35e7ce4e.png'
					}
				]
			}
		},
		onLoad(option) {
			this.brand = '奥迪';
			this.cartype='A1';
			this.image = this.colorList[0].imgPath;
			this.color='朱雀(6.5透明)'
			//this.handleShowTree();
		},
		onReady() {
			
		},
		methods: {
			onChangeColor(item) {
				if (!item.imgPath) return;
				this.image = item.imgPath;
			},
			toMore() {
				uni.navigateTo({
  					url: '/pages/car/case'
				})
			},
			async selectBrand() {
				this.showBrand = true;
				//获取该品牌
				let res = await this.$api.getBrands();
				if(res.code){
					let braData=res.data;
					for (let var1 of braData) {
						let brands=var1.brands;
						for (let bran of brands) {
							this.brandList.push(bran.brand_name);
						}
					}
				}
			},
			
			async handleShowTree() {
				this.showTree = true;
				this.selectedData = [];
				//获取该品牌下车型清单
				let res = await this.$api.getList({
					model:'cartype',
					field:'car_model',
					where:"car_brand = '" + this.brand + "'"
				});
				if(res.code){
					this.selList = res.data;
				}
			},
			async handleShowColor() {
				this.showColor = true;
				//选颜色
				let res = await this.$api.getList({
					model: this.modelList[this.tab].model,
					field:'product_type',
					where:'1=1'
				});
				if(res.code){
					this.selList = res.data;
				}
			},
			
			async tapItemBrand(item){
				this.brand=item;
				this.showBrand = false;
			},
			async tapItem(item){
				this.cartype=item;
				this.showTree=false;
				this.showCar();
			},
			async tapItemColor(item){
				this.color=item;
				this.showColor=false;
				this.showCar();
			},
			async showCar(){
				//加载颜色图片
				let res = await this.$api.getColorList({
					model: 1,
				});
				if(res.code=200){
					let target=res.result.find(entity=>entity.carBrand==this.brand
					&&entity.carType==this.cartype&&entity.carColor==this.color);
					if(target){
						this.image =target.carImage;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.car-wrap {
	height: 100vh;
	// background-color: ;
	background-image: linear-gradient(#b3bdc9, #fdfffe 45%);
	position: relative;
	&::before {
		content: "";
		display: inline-block;
		width: 1400rpx;
		height: 700rpx;
		border-radius: 50%;
		position: absolute;
		top: 45%;
		left: -41%;
		// background-color: rgba(0,0,0,.2);
		background-image: linear-gradient(rgba(0, 0, 0, .12), transparent 10%);
		z-index: 10;
	}
	.car-img {
		padding-top: 160rpx;
	}
}
.color-wrap {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 300rpx;
	font-size: 48rpx;
}
.more {
	position: absolute;
	bottom: 200rpx;
	padding: 20rpx 40rpx;
	color: red;
	.u-icon {
		margin-left: 10rpx;
	}
}
.scroll-view_H {
	white-space: nowrap;
	width: 80%;
	display: flex;
	::v-deep .uni-scroll-view-content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 80rpx;
		padding: 15rpx;
		text-align: center;
		font-size: 36rpx;
		.color-item {
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			overflow: hidden;
			position: relative;
			top: 4rpx;
			&::before {
				content: "";
				display: inline-block;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				position: absolute;
				top: -42rpx;
				left: -10rpx;
				background-color: rgba(255,255,255,.2);
			}
		}
	}
}
.picture-list-info {
		position: relative;
		text-align: center;
	}

	.picture-list-img {
		margin-top: 50rpx;
		background-image: linear-gradient(#d4dbe3, #fff 80%, transparent);
		border-radius: 26rpx;
	}

	.picture-list-desc {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		padding: 20upx;
	}

	.car-btn {
		width: 650upx;
		margin-top: 100upx;
	}	
	
	.selectedText{
		font-size: 40upx;
		margin-left: 60upx;
		border-bottom: 2upx gray solid;
		width: 50%;
		text-align: center;
		padding-bottom: 20upx;
		margin-top: 20upx;
	}
	
	.toSelectText{
		font-size: 34upx;
		margin-left: 5%;
		border-bottom: 2upx gray solid;
		width: 90%;
		text-align: center;
		padding-bottom: 10upx;
		margin-top: 20upx;
	}
	
	.sideBar{
		width: 60%;
		height: 100%;
		position: fixed;
		right: 0;
		top: 0;
		background-color: #FFFFFFBB;
	}
</style>
